<!--
 * @Author: zhangjingyu
 * @Date: 2020-10-22 19:30:00
 * @LastEditors: zhangjingyu
 * @LastEditTime: 2020-12-29 13:52:26
 * @FilePath: \vprisk10.14\src\views\SystemMange\systemParameterConfig.vue
 * @Description: 系统参数配置
-->
<template>
  <!-- 系统参数配置页面 -->
  <div>
    <!-- 操作区域 -->
    <upper-template
      @search="searchForm.page=1,searchFunc()"
      @clear="
        (searchForm.paramValue = ''),
          (searchForm.moduleCode = ''),
          (searchForm.paramId = '')
      "
    >
      <!-- 按钮 -->
      <div slot="buttonArea">
        <el-button @click="editFunc">编辑</el-button>
      </div>
      <!-- 搜索 -->
      <div slot="searchArea">
        <el-form
          :model="searchForm"
          ref="searchForm"
          label-width="85px"
          label-position="left"
          size="mini"
        >
          <el-form-item label="参数编号：">
            <el-input
              v-model="searchForm.paramId"
              placeholder="请输入参数编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属模块：">
            <el-select
              v-model="searchForm.moduleCode"
              placeholder="请选择..."
              clearable
            >
              <el-option
                v-for="item in moduleList"
                :key="item.moduleCode"
                :value="item.moduleCode"
                :label="item.moduleName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="参数值：">
            <el-input
              v-model.trim="searchForm.paramValue"
              placeholder="请输入参数值"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="columnHide">
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            v-for="item in textData"
            :label="item.label"
            :disabled="item.disabled"
            :key="item.prop"
            >{{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </upper-template>
    <el-row>
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        @row-click="rowClick"
      >
        <el-table-column
          width="55"
          type="selection"
          
        ></el-table-column>
        <el-table-column
          prop="paramId"
          label="参数编号 "
          show-overflow-tooltip
          v-if="columnState[0]"
        >
        </el-table-column>
        <el-table-column
          prop="paramValue"
          label="参数值 "
          sortable
          v-if="columnState[1]"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          prop="moduleCode"
          label="所属模块"
          align="center"
          :formatter="row=>$getLabel(row.moduleCode,moduleList,'moduleCode','moduleName')"
          sortable
          v-if="columnState[2]"
        >
        </el-table-column>

        <el-table-column
          prop="remark"
          label="备注 "
          v-if="columnState[3]"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
      <pagination
        @size-change="sizeChange"
        @current-change="pageChange"
        @refresh="searchFunc"
        :current-page="searchForm.page"
        :page-size="searchForm.size"
        :total="total"
      ></pagination>
    </el-row>
    <el-dialog
      v-dialogDrag
      :title="'编辑系统参数'"
      :visible.sync="addOrEdit"
      width="514px"
    >
      <el-form
        :model="saveForm"
        ref="saveForm"
        label-width="97px"
        label-position="left"
        :rules="saveFormRules"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="参数编号：" prop="paramId">
              <el-input
                v-model="saveForm.paramId"
                :disabled="saveFlg == 2"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属模块：" prop="moduleCode">
              <el-select
                        v-model="saveForm.moduleCode"
                        placeholder="请选择..."
                 :disabled="true"
                      >
                        <el-option
                          v-for="item in moduleList"
                          :key="item.moduleCode"
                          :value="item.moduleCode"
                          :label="item.moduleName"
                        ></el-option>
                      </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="参数值：" prop="paramValue">
              <el-input v-model="saveForm.paramValue"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：" prop="remark">
              <el-input v-model="saveForm.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="saveFunc">确 定</el-button>
        <el-button @click="addOrEdit = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { systemManage } from "@/api/index";
import upperTemplate from "@/components/upperTemplate.vue";
export default {
  data() {
    return {
      saveFlg: "",
      addOrEdit: false, // 新增/编辑/查看弹窗
      searchForm: {
        paramValue: "",
        moduleCode: "",
        paramId: "",
        page: 1,
        size: 15
      },
      total: 0,
      // 显示的列
      checkList: ["参数编号", "参数值", "所属模块", "备注"],
      // 列隐藏依据数据
      textData: [
        { prop: "paramId", label: "参数编号", disabled: true },
        { prop: "paramValue", label: "参数值", disabled: true },
        { prop: "moduleCode", label: "所属模块", disabled: false },
        { prop: "remark", label: "备注", disabled: false }
      ],
      // 所属模块下拉框
      moduleList: [],
      tableData: [],
      saveForm: {
        paramId: "",
        moduleCode: "",
        paramValue: "",
        remark: "",
        oldRemark: ""
      },
      saveFormRules: {
        paramId: [
          { required: true, message: "该输入项为必输项", trigger: "blur" }
        ],
        moduleCode: [
          { required: true, message: "该输入项为必输项", trigger: "blur" }
        ],
        paramValue: [
          { required: true, message: "该输入项为必输项", trigger: "blur" },
          { min: 1, max: 128, message: "长度在1-128之间", trigger: "blur" }
        ],
        remark: [
          { required: true, message: "该输入项为必输项", trigger: "blur" },
          { min: 0, max: 200, message: "长度最大为200", trigger: "blur" }
        ]
      }
    };
  },
  components: {
    upperTemplate
  },
  computed: {
    // 列隐藏控制的v-if数据
    columnState() {
      let arr = [],
        arr1 = this.textData,
        arr2 = this.checkList;
      for (let i = 0; i < arr1.length; i++) {
        let flg = false;
        for (let j = 0; j < arr2.length; j++) {
          if (arr1[i].label === arr2[j]) {
            flg = true;
          }
        }
        arr.push(flg);
      }
      return arr;
    }
  },
  created() {
    this.getModuleList();
    this.searchFunc();
  },
  watch:{
     addOrEdit() {
      // 窗口打开或关闭清除校验结果
      if (this.$refs.saveForm) {
        this.$refs.saveForm.clearValidate();
      }
    },
  },
  methods: {
    // 获取moduleList
    getModuleList() {
      systemManage.queryAllEnableModules().then(res => {
        if (res && res.code == 200) {
          this.moduleList = res.datas;
        }
      });
    },
    searchFunc() {
      let data = { ...this.searchForm };
      systemManage.sysParamQuery(data).then(res => {
        if (res.code == 200) {
          this.tableData = res.datas.rows;
          this.total = res.datas.total;
        }
      });
    },
    editFunc() {
      this.saveFlg = 2;
      let selection = this.$refs.multipleTable.selection;
      if (selection.length != 1) {
        return this.$message.warning("请选择一条数据进行修改");
      }
      let row = selection[0];
      let form = { ...row };
      this.saveForm = form;
      this.addOrEdit = true;
    },
    saveFunc() {
      this.$refs["saveForm"].validate(valid => {
        if (valid) {
          let data = {
            ...this.saveForm
          };
          systemManage
            .sysParamSave(data)
            .then(res => {
              if (res.code == 200) {
                this.$message.success("保存成功");
                this.addOrEdit = false;
                this.searchFunc();
              } else {
                this.$message.error(res.message);
              }
            })
            .catch(err => {});
        }
      });
    },
    rowClick(row) {
      // 点击表格行
      if (this.$refs.multipleTable) {
        this.$refs.multipleTable.clearSelection();
      }
      this.$refs.multipleTable.toggleRowSelection(row, true);
    },
    sizeChange(size) {
      this.searchForm.size = size;
      this.searchFunc();
    },
    pageChange(page) {
      this.searchForm.page = page;
      this.searchFunc();
    }
  }
};
</script>

<style lang="scss" scoped>
</style>